<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>会话管理</title>
  <script src="../../../static/kaige/js/szload.js"></script>
  <style>
    .kaige-chat-box {
      background-image: url(../../../static/img/chat-bg-1.jpg);
    }
  </style>
</head>

<body>
  <div class="kaige-body kaige-btn-radius">
    <div class="layui-row layui-col-space10 fenlanbox">
      <div class="layui-col-md6">
        <table class="layui-table" id="pageTable" lay-filter="pageTable" lay-size="sm"></table>
        <input type="hidden" name="keywordsCache" value="{}" />
        <input type="hidden" id="now_group_id" value="0" />
      </div>
      <div class="layui-col-md6">
        <table class="layui-table" id="itemTable" lay-filter="itemTable" lay-size="sm"></table>
      </div>
    </div>
  </div>
  <script>
    load_init_js(function () {
      layui.config({
        base: szoapcpath + '/static/kaige/layuiextend/'
      }).use(['kaige'], function () {
        var element = layui.element,
          layer = layui.layer,
          table = layui.table,
          form = layui.form,
          kaige = layui.kaige,
          dropdown = layui.dropdown,
          util = layui.util,
          $ = layui.$,
          laytpl = layui.laytpl;
        form.render();

        //查看图片
        window.viewImage = function (imgUrl) { kaige.viewimage({ maxwidth: 600, maxheight: 600, url: imgUrl }); }

        kaige.table({
          elem: '#pageTable',
          height: 'full-25',
          url: "/im.chat/grouplist",
          id: 'pageTable',
          toolbar: '#dtoolbar1',
          defaultToolbar: [{ title: '添加会话群', layEvent: 'dt-btn-add', icon: 'layui-icon-add-circle' }],
          cols: [[
            {
              field: 'chat_head', title: '名称', event: 'select-name', templet: function (d) {
                return '<img src="' + d.chat_head + '" class="chat_head" alt="" /> ' + d.name;
              }
            },
            { field: 'type', width: 80, title: '类型', align: 'center', templet: function (d) { return typeTd(d) } },
            { field: 'sort', width: 70, title: '排序', align: 'center' },
            { field: 'create_name', width: 100, title: '创建人', align: 'center', hide: true },
            { field: 'create_time', width: 150, title: '创建时间', align: 'center', hide: true },
            { field: 'nickname', width: 100, title: '群主', align: 'center', hide: true },
            { field: 'status', width: 70, title: '状态', align: 'center', templet: function (d) { return statusTd(d) } },
            { field: 'id', title: '操作', toolbar: '#dtrbar', align: 'center', width: 130, fixed: 'right' }
          ]]
        });

        var layuiRowClickNum = 0;
        //触发行双击事件
        table.on('rowDouble(pageTable)', function (obj) {
          loaditem(obj.data);
        });

        function loaditem(data) {
          layuiRowClickNum++;
          if (layuiRowClickNum === 1) {
            // console.log(data);
            if (data && data.id) {
              $('#now_group_id').val(data.id);
              table.reload('itemTable', {
                where: {
                  group_id: data.id,
                  page: 1
                }
              });
              $('#table_head_title_right').html('【' + data.name + '】群成员列表');
            } else {
              layer.msg('请选择群名称');
            }
          }
        }

        function typeTd(d) {
          switch (d.type) {
            case 1:
              return '<span class="layui-badge layui-bg-green">普通群</span>';
              break;
            case 2:
              return '<span class="layui-badge layui-bg-black">讨论组</span>';
              break;
            case 3:
              return '<span class="layui-badge layui-bg-blue">应用</span>';
              break;
          }
        }

        function statusTd(d) {
          switch (d.status) {
            case 1:
              return '<span class="layui-badge layui-bg-green">启用</span>';
              break;
            case 2:
              return '<span class="layui-badge layui-bg-black">禁用</span>';
              break;
          }
        }

        //列表-监听表头工具栏事件dtoolbar
        table.on('toolbar(pageTable)', function (obj) {
          //var checkStatus = table.checkStatus(obj.config.id);
          switch (obj.event) {
            case 'dt-btn-add':
              btnadd();
              break;
          }
        });

        //列表-监听单元格行工具事件dtrbar
        table.on('tool(pageTable)', function (obj) {
          var that = this;
          var data = obj.data;
          switch (obj.event) {
            case 'edit':
              baredit(data);
              break;
            case 'del':
              bardel(data);
              break;
            case 'select-name':
              loaditem(data);
              break;
            case 'send':
              barsend(data);
              break;
          }
        });

        //发送信息--群发
        function barsend(b) {
          layer.msg('待开发');
        }

        //添加
        function btnadd() {
          kaige.form({
            url: "/im.chat/groupadd",
            data: {},
            encode:1,// 进行编码 可以输空格，方过签名
            id: 'kaige',
            area: ['800px', '550px'],
            title: '<i class="layui-icon layui-icon-add-circle"></i> 添加 - 群',
            tablelayid: 'pageTable',
            overflow: false,
            callbefore: function (layero, index) {
              addeditform();
            }
          });
        }

        //编辑
        function baredit(d) {
          kaige.form({
            url: "/im.chat/groupedit",
            data: { id: d.id },
            id: 'kaige',
            encode:1,// 进行编码 可以输空格，方过签名
            area: ['800px', '550px'],
            title: '<i class="layui-icon layui-icon-edit"></i> 编辑 - 群',
            tablelayid: 'pageTable',
            overflow: false,
            callbefore: function (layero, index) {
              addeditform();
            }
          });
        }


        //删除
        function bardel(d) {
          layer.confirm('您确定删除吗？', {
            title: '<i class="layui-icon layui-icon-delete"></i> 删除确认',
            btn: ['确认', '取消']
          }, function () {
            $.post("/im.chat/groupdel", { id: d.id }, function (res) {
              res.status && table.reload('pageTable');
              layer.msg(res.msg);
            });
          });
        };

        //上传文件
        function upfile_load_click() {
          //头像上传
          kaige.upload_multi_files({
            input_id: '#input_chat_head',
            img_id: '#chat_head_img',
            btn: '#chat_head_upbtn',
            url: szoapcpath + '/pages/files/upfiles.html?id=7'
          });
        }

        function addeditform() {
          //部门
          kaige.xmSelectTree({
            id: 'dept_id',
            url: '/select/depttree',
            udata: { automatch: 1 },
            radio: true,
            clickClose: true
          });

          upfile_load_click();

        }

        kaige.table({
          elem: '#itemTable',
          height: 'full-25',
          url: "/im.chat/groupuserlist",
          id: 'itemTable',
          toolbar: '#dtoolbar2',
          defaultToolbar: [{ title: '添加群用户', layEvent: 'dt-btn-add', icon: 'layui-icon-add-circle' }],
          cols: [[
            { field: 'gluser', width: 100, title: '用户名', align: 'center', templet: function (d) { return d.gluser ? d.gluser.un : '' } },
            { field: 'gluser', width: 100, title: '姓名', align: 'center', templet: function (d) { return d.gluser ? d.gluser.real_name : '' } },
            { field: 'gluser', width: 100, title: '部门', align: 'center', templet: function (d) { return d.gluser ? d.gluser.dept_id_name : '' } },
            { field: 'gluser', title: '职位', align: 'center', templet: function (d) { return d.gluser ? d.gluser.ranking_id_name : '' } },
            { field: 'id', title: '操作', toolbar: '#dtrbar', align: 'center', width: 130, fixed: 'right' }
          ]],
          done: function (res, a, b) {
            // 阻止双击时冒泡
            setTimeout(function(){
              layuiRowClickNum = 0;
            },300);            
          }
        });

        //列表-监听表头工具栏事件dtoolbar
        table.on('toolbar(itemTable)', function (obj) {
          //var checkStatus = table.checkStatus(obj.config.id);
          switch (obj.event) {
            case 'dt-btn-add':
              btnadditem();
              break;
          }
        });

        //列表-监听单元格行工具事件dtrbar
        table.on('tool(itemTable)', function (obj) {
          var that = this;
          var data = obj.data;
          switch (obj.event) {
            case 'edit':
              baredititem(data);
              break;
            case 'del':
              bardelitem(data);
              break;
          }
        });

        //添加
        function btnadditem() {
          kaige.form({
            url: "/im.chat/groupuseradd",
            data: {},
            id: 'kaige_gu',
            encode:1,// 进行编码 可以输空格，方过签名
            area: ['800px', '420px'],
            title: '<i class="layui-icon layui-icon-add-circle"></i> 添加 - 群用户',
            tablelayid: 'itemTable',
            overflow: false,
            callbefore: function (layero, index) {
              addedit2form();
            }
          });
        }

        //编辑
        function baredititem(d) {
          kaige.form({
            url: "/im.chat/groupuseredit",
            data: { id: d.id },
            encode:1, // 进行编码 可以输空格，方过签名
            id: 'kaige_gu',
            area: ['800px', '420px'],
            title: '<i class="layui-icon layui-icon-edit"></i> 编辑 - 群用户',
            tablelayid: 'itemTable',
            overflow: false,
            callbefore: function (layero, index) {
              addedit2form();
            }
          });
        }


        //删除
        function bardelitem(d) {
          layer.confirm('您确定删除吗？', {
            title: '<i class="layui-icon layui-icon-delete"></i> 删除确认',
            btn: ['确认', '取消']
          }, function () {
            $.post("/im.chat/groupuserdel", { id: d.id }, function (res) {
              res.status && table.reload('itemTable');
              layer.msg(res.msg);
            });
          });
        };


        function addedit2form() {
          if (parseInt($('#now_group_id').val()) < 1) {
            layer.closeAll();
            layer.msg('请在左侧选择一个群');
          }
          kaige.xmSelect({
            id: 'user_id',
            url: '/select/employee',
            udata: { automatch: 1 },
            radio: true,
            clickClose: true
          });

          kaige.upload_multi_files({
            input_id: '#input_chat_bg',
            img_id: '#chat_bg_img',
            btn: '#chat_bg_upbtn',
            url: szoapcpath + '/pages/files/upfiles.html?id=7'
          });

          $('#guform_group_id').val($('#now_group_id').val());
        }

      });
    });
  </script>
  <script type="text/html" id="dtrbar">
      <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>
        <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
      </div>
  </script>
  <script type="text/html" id="dtoolbar1">
    <div class="table_head_title">会话群列表</div>
  </script>
  <script type="text/html" id="dtoolbar2">
    <div class="table_head_title" id="table_head_title_right">群成员</div>
  </script>

  <script type="text/html" id="kaige_form_html">
    <form class="kaige-body layui-form layui-form-pane" lay-filter="kaige_form_lay_filter">
      {{# if(d.id){ }}
      <input type="hidden" name="id" value="{{ d.id || '' }}" />
      {{# } }}
      <div class="layui-form-item">
        <label class="layui-form-label fl-red">群名称</label>
        <div class="layui-input-inline">
          <input name="name" value="{{ d.name || '' }}" lay-verify="required" lay-reqtext="请输入群名称" placeholder="群名称" class="layui-input" type="text">
        </div>
        <label class="layui-form-label">群图标</label>
        <div class='layui-input-inline' style="width: 100px;">
          <img id="chat_head_img" style="height:auto;max-height:32px;min-width:32px" onclick="viewImage(this.src)" src="{{ d.chat_head_url || '' }}" />
          <input type="hidden" name="chat_head" id="input_chat_head" value="{{ d.chat_head || '' }}">
        </div>
        <div class='layui-input-inline' style="width: 111px;">
          <a class="layui-btn layui-btn-sm" id="chat_head_upbtn">上传</a>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label fl-red">类型</label>
        <div class="layui-input-inline">
          <select name="type" lay-verify="required">
            <option value=""></option>
            <option value="1" {{# if (d.type==1){ }} selected {{# } }} >普通群</option>
            <option value="2" {{# if (d.type==2){ }} selected {{# } }} >讨论组</option>
            <option value="3" {{# if (d.type==3){ }} selected {{# } }} >应用</option>
          </select>
        </div>
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
          <input name="sort" value="{{ typeof(d.sort)==='number' ? d.sort: '100' }}" class="layui-input" type="number">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">所属单位</label>
        <div class="layui-input-inline">
          <select name="company_id" lay-filter="company_id" id="company_id">
            <option value="">选择单位</option>
            {{#  layui.each(d.companyList, function(index, item){ }}
            <option value="{{ item.id }}"  {{#  if(d.company_id && item.id == d.company_id ){ }} selected {{#  } }} >{{ item.name }}</option>
            {{#  }) }}
          </select>
        </div>
        <label class="layui-form-label">部门</label>
        <div class="layui-input-inline">
          <div id="dept_id_select_box"></div>
          <input type="hidden" id="dept_id_name" value="{{ d.dept_id_name || ''}}" name="dept_id_name" />
          <input type="hidden" id="dept_id" value="{{ d.dept_id || '' }}" name="dept_id" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">编号</label>
        <div class="layui-input-inline">
          <input name="bn" value="{{ d.bn || '' }}" class="layui-input" type="text">
        </div>
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
          <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用" {{#  if(d.status ==1 ){ }} checked {{#  } }} />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">PC端URL</label>
        <div class="layui-input-block">
          <input name="url_pc" value="{{ d.url_pc || '' }}" class="layui-input" type="text">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">手机端URL</label>
        <div class="layui-input-block">
          <input name="url_wap" value="{{ d.url_wap || '' }}" class="layui-input" type="text">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">说明</label>
        <div class="layui-input-block">
          <textarea name="explain" class="layui-textarea" style="height: 150px;">{{ d.explain || '' }}</textarea>
        </div>
      </div>
      <div class="layui-form-item layui-hide">
        <button class="layui-hide" lay-submit="" id="kaige_form_btn_save" lay-filter="kaige_form_btn_save">保存数据</button>
      </div>
    </form>
  </script>

  <script type="text/html" id="kaige_gu_form_html">
    <form class="kaige-body layui-form layui-form-pane" lay-filter="kaige_gu_form_lay_filter">
      {{# if(d.id){ }}
      <input type="hidden" name="id" value="{{ d.id }}" />
      {{# } }}
      <input type='hidden' value="{{ d.group_id || '' }}" name='group_id' id="guform_group_id">
      <div class="layui-form-item">
        <label class="layui-form-label">选择用户</label>
        <div class="layui-input-inline">
          <div id="user_id_select_box"></div>
          <input type="hidden" id="user_id_name" value='{{ d.nickname || '' }}' name="nickname" />
          <input type="hidden" id="user_id" value='{{ d.uid || '' }}' name="uid" />
        </div>
        <label class="layui-form-label">个性签名</label>
        <div class="layui-input-inline">
          <input name="sign" value="{{ d.sign || '' }}" class="layui-input" type="text">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">置顶</label>
        <div class="layui-input-inline">
          <input name="is_top" value="{{ d.is_top || '' }}" class="layui-input" type="number">
        </div>
        <label class="layui-form-label">显示昵称</label>
        <div class="layui-input-inline">
          <input type="checkbox" name="is_show_nick" lay-skin="switch" lay-text="显示|不显" {{#  if(d.is_show_nick ==1 ){ }} checked {{#  } }} />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">聊天背景</label>
        <div class='layui-input-inline' style="width: 100px;">
          <img id="chat_bg_img" style="height:auto;max-height:32px;min-width:32px" onclick="viewImage(this.src)" src="{{ d.chat_bg_url || '' }}" />
          <input type="hidden" name="chat_bg" id="input_chat_bg" value="{{ d.chat_bg || '' }}">
        </div>
        <div class='layui-input-inline' style="width: 111px;">
          <a class="layui-btn layui-btn-sm" id="chat_bg_upbtn">上传</a>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
          <textarea name="memo" class="layui-textarea" style="height: 150px;">{{ d.memo || '' }}</textarea>
        </div>
      </div>
      <div class="layui-form-item layui-hide">
        <button class="layui-hide" lay-submit="" id="kaige_gu_form_btn_save" lay-filter="kaige_gu_form_btn_save">保存数据</button>
      </div>
    </form>
  </script>
</body>

</html>